<template>
  <ul>
    <h1>{{ title }}</h1>
    <li v-for="(item, index) in list" :key="item.id">
      <span class="btn">
        <input
          type="checkbox"
          @change="onChange(item)"
          :checked="item.check"
          name=""
          id=""
        />
      </span>
      <span class="btn" :class="item.check ? 'active' : ''">
        {{ item.value }}
      </span>
      <span class="btn" @click="removeItem(index)">删除</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
    },
    title: {
      type: String,
      default: '未完成', // 设置默认值
    },
  },
  methods: {
    onChange(item) {
      this.$emit('onChange', item)
    },
    removeItem(index) {
      this.$emit('removeClick', index)
    },
  },
}
</script>

<style lang="scss" scoped>
.active {
  text-decoration: line-through;
}
.btn {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
